<template>
  <div>
    <el-button type="primary"
               @click="showFlag=!showFlag">show</el-button>
    <transition name="el-zoom-in-bottom">
      <div v-show="showFlag">
        <carousel-com :pirList=pirList></carousel-com>
      </div>
    </transition>
  </div>
</template>

<script>
import CarouselCom from './components/CarouselCom'

export default {
  name: 'TestView4',
  components: {
    CarouselCom
  },
  data: function () {
    return {
      showFlag: false,
      pirList: [
        { index: 1, photo: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579613056950&di=77a1d178742e8fbc65240ed59ca7fd17&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2019-01-27%2F5c4d3dbfb15be.jpg' },
        { index: 2, photo: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579613240867&di=b331ab720efee2418f21cf66f38b4707&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2019-04-28%2F5cc5397a2abde.jpg' },
        { index: 3, photo: 'https://img.ivsky.com/img/bizhi/pre/201909/20/dilraba_dilmurat-006.jpg' },
        { index: 4, photo: 'http://pic1.win4000.com/wallpaper/2018-12-03/5c048b438c83f.jpg' },
        { index: 5, photo: 'http://pic1.win4000.com/wallpaper/2018-12-03/5c048b414a918.jpg' }]
    }
  }
}
</script>

<style lang="stylus" scoped></style>
